<template>
  <div class="customer-remind-table-container">
    <el-table
      stripe
      :data="disposeFormListViewTime(remindList, columns)"
      :highlight-current-row="false"
      header-row-class-name="common-list-table-header__v2"
      row-class-name="customer-remind-table-row"
      @sort-change="sortChange"
      v-loading="loading"
      class="customer-remind-table"
      v-bind="extraAttrs">
      <template slot="empty">
        <BaseListForNoData
          v-show="!loading"
          table-type="smallTable"
          :notice-msg="$t('common.base.tip.noData')"
        ></BaseListForNoData>
      </template>

      <el-table-column
        v-for="(column, index) in columns"
        v-if="column.show"
        :key="`${column.field}_${index}`"
        :label="column.label"
        :prop="column.field"
        :width="column.width"
        :sortable="column.sortable"
        :show-overflow-tooltip="column.tooltip"
        :align="column.align">
        <template slot-scope="scope">
          <template v-if="column.field === 'remind.name'">
            <a href="javascript:;" class="edit-btn" @click="$eventBus.$emit('product_view.open_remind_dialog', scope.row)">{{scope.row.remind.name}}</a>
          </template>
          <template v-else-if="column.field === 'remindTime'">
            {{(scope.row.remindTime || $t('common.base.null'))}}
          </template>
          <template class="rm-action" v-else-if="column.field === 'action'">
            <el-button type="text" @click="deleteRemind(scope.row)" :disabled="pending[scope.row.id]"
                       class="delete-remind-btn" size="mini">{{$t('common.base.delete')}}
            </el-button>
          </template>

          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt_8" v-if="remindList.length > 0">
      <i18n path="common.base.table.totalCount">
        <span place="count">{{remindList.length}}</span>
      </i18n>
    </div>
  </div>
</template>

<script>
import { formatDate, useFormTimezone } from 'pub-bbx-utils';
import * as CustomerApi from '@src/api/CustomerApi.ts';
import {deleteScheduler} from '@src/api/CommonApi';

export default {
  name: 'remind-table',
  props: {
    shareData: {
      type: Object,
      default: () => ({})
    },
    extraAttrs: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      ...useFormTimezone(),
      pending: {},
      remindList: [],
      columns: this.buildColumns(),
      loading: false,
      searchModel: {
        pageSize: 10,
        pageNum: 1,
        totalItems: 0,
        orderDetail: {}
      }
    }
  },
  computed: {
    productId() {
      return this.shareData.product.id;
    },
  },
  mounted() {
    this.fetchData();
    this.$eventBus.$on('product_remind_table.update_remind_list', this.fetchData);
  },
  beforeDestroy() {
    this.$eventBus.$off('product_remind_table.update_remind_list', this.fetchData);
  },
  methods: {
    sortChange({ prop, order, }) {
      this.searchModel.orderDetail = {
        column: prop,
        sequence: order === 'ascending' ? 'ASC' : 'DESC',
        isSystem: 1,
      };
      this.fetchData();
    },
    async deleteRemind(rm) {
      try {
        const action = await this.$platform.confirm(this.$t('product.tips.deleteCheckTip', {name: rm.remind.name}));
        if (!action) return;
        this.pending[rm.id] = true;

        await deleteScheduler(rm.id);
        this.fetchData();
        this.$eventBus.$emit('product_view_remind_update');
        this.$eventBus.$emit('product_info_record.update_record_list');
      } catch (e) {
        console.error('deleteRemind catch err', e);
      }
    },
    jump(pN) {
      this.searchModel.pageNum = pN;
      this.fetchData();
    },
    fetchData() {
      const {orderDetail, } = this.searchModel;
      const params = {
        modalId: this.productId,
        modal: 'product',
      };

      if (Object.keys(orderDetail).length) {
        params.orderDetail = orderDetail;
      }

      this.loading = true;

      CustomerApi.getRemindOfCustomer(params)
        .then(res => {
          if (!res) return;

          this.remindList = res
            .map(rm => {
              rm.remindTime = formatDate(rm.remindTime)
              this.$set(this.pending, rm.id, false);
              return Object.freeze(rm);
            });
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
          console.error('e', e);
        })
    },
    buildColumns() {
      return [{
        label: this.$t('common.record.product.record13.text2'),
        field: 'remind.name',
        show: true,
        tooltip: true,
        // sortable: 'custom',
      }, {
        label: this.$t('customer.detail.customerRemindTable.table.label.remindTime'),
        field: 'remindTime',
        show: true,
        tooltip: true,
        // sortable: 'custom',
      }, {
        label: this.$t('common.fields.remindContent.displayName'),
        field: 'remindContent',
        show: true,
        tooltip: true,
        // sortable: 'custom',
      }, {
        label: this.$t('common.base.table.col.operator'),
        field: 'action',
        show: true,
        tooltip: false,
        width: '80px',
      }]
    }
  },
}
</script>

<style lang="scss">
  .customer-remind-table-container {

    padding: 16px;
    .edit-btn {
      @include fontColor();
    }

    .delete-remind-btn {
      color: $color-danger;
    }

    .delete-remind-btn.is-disabled,
    .delete-remind-btn.is-disabled:hover,
    .el-button.delete-remind-btn:focus {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
    }
  }
</style>